<template>
  <div>
    <li>我是home组件</li>
    <li>我是home组件</li>
    <li>我是home组件</li>
    <li>我是home组件</li>
    <button @click="handleState">vuex</button>
    <button @click="handleAction">handleAction</button>
    <p>{{counter}}</p>
    <p>{{age}}</p>
    <p>{{money}}</p>
    <button @click="routerMessage">message</button>
    <router-view></router-view>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { useRouter } from "vue-router";
import { useState } from '../hooks/store'
export default {
  setup() {
    const route = useRouter()
    const store = useStore()
    const storState = useState(['counter', 'age', 'money'])
    const routerMessage = () => {
      route.push('/home/message')
    }

    return {
      routerMessage,
      handleState: () => store.commit('increment'),
      // count: computed(() => store.state.counter),
      handleAction: () => store.dispatch('increment'),
      ...storState
    }
  }
}
</script>

<style>

</style>